<template>
  <div>
    <el-card class="card">
      <div slot="header">分类管理</div>
      <div>
        <div class="title">乐居分类：</div>
        <el-row :gutter="20">
          <el-col
            v-for="item in categoryList"
            :key="item.id"
            style="margin-bottom: 20px"
            :span="6"
            :offset="0"
          >
            <el-card shadow="hover">
              <div slot="header">
                <span>{{ item.name }}</span>
              </div>

              <el-upload
                :action="uploadUrl"
                :headers="uploadHeaders"
                :show-file-list="false"
                :on-success="addTiImg"
              >
                <img
                  v-if="item.icon"
                  style="width: 100%; height: 300px"
                  :src="item.icon"
                  alt=""
                  @click="uploadImg(item)"
                />
              </el-upload>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div class="title">全部分类：</div>
      <el-table
        :data="tableList"
        style="margin: 30px auto"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column label="菜单名称" width="150" fixed>
          <template slot-scope="scope">
            <span>{{ scope.row.name }} </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="icon" width="200">
          <template slot-scope="scope">
            <img class="pic" :src="scope.row.icon" alt="" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="分类名字" prop="name" />
        <el-table-column align="center" label="排序" prop="sort" width="120" />
        <el-table-column align="center" label="显示状态" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.showStatus === 1 ? "显示" : "不显示" }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="导航栏展示" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.navStatus === 1 ? "展示" : "不展示" }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="描述"
          prop="description"
          width="120"
        />
        <el-table-column
          align="center"
          label="创建时间"
          prop="createTime"
          width="190"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getAllCategory, updateCategory } from "@/api/product";
import mixin from "@/minx/index";
export default {
  props: {},
  mixins: [mixin],
  data() {
    return {
      categoryList: [],
      tableList: [],
      categoryItem: {},
    };
  },
  computed: {},
  created() {
    this.init();

  },
  mounted() {},
  watch: {},
  methods: {
    init() {
      getAllCategory().then((res) => {
        if (res.success) {
          this.tableList = res.data.items.map((item) => {
            var obj = item.category;
            obj.children = item.children;
            return obj;
          });

          res.data.items.forEach((item) => {
            if (item.category.name === "乐居") {
              this.categoryList = item.children;
            }
          });
        } else {
          this.$message.error("获取数据失败");
        }
      });
    },
    addTiImg(res) {
      this.$confirm("此操作将会覆盖该图片, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "primary",
      })
        .then(() => {
          updateCategory({
            id: this.categoryItem.id,
            level: this.categoryItem.level,
            parentId: this.categoryItem.parentId,
            icon: res.data.fileUrl,
          }).then((res) => {
            if (res.success) {
              this.$message.success("上传成功");
              this.init();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消上传",
          });
        });
    },
    uploadImg(el) {
      // console.log(el)
      this.categoryItem = el;
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.title {
  font-weight: 700;
  margin-bottom: 30px;
}
.pic {
  width: 60px;
  height: 60px;
}
</style>
